<template>
  <div class="center">
    <van-nav-bar title="个人中心" />

    <div v-for="(item,index) of dataList" :key="item.id">
      <div class="home-line v-flex" >
        <div class="v-flex-item">订单{{index+1}}</div>
        <div class="v-flex-item text-right">
          <van-button  plain type="danger" round="true" size="small" @click="cancelRecord(item)" v-if="'PAY'==item.orderStatus">取消订单</van-button>
        </div>
      </div>
      <van-cell-group>
        <van-cell class="van-cell2" title="商品名称" :value="item.productName"/>

        <van-cell class="van-cell2" title="订单编号" :value="item.orderNo"/>
        <van-cell class="van-cell2" title="订单时间" :value="item.borrowTime"/>
        <van-cell class="van-cell2" title="订单状态" :value="orderStatusJson[item.orderStatus]"/>
        <van-cell class="van-cell2" title="快递信息" :value="item.deliveryCompany"/>
      </van-cell-group>
    </div>
    <!-- <div>
      <div class="home-line">订单二</div>
      <van-cell-group>
        <van-cell class="van-cell2" title="商品名称" value="BB剪除"/>
        <van-cell class="van-cell2" title="订单编号" value="6543131567665165"/>
        <van-cell class="van-cell2" title="订单时间" value="2019-05-20"/>
        <van-cell class="van-cell2" title="发货状态" value="待发货"/>
        <van-cell class="van-cell2" title="快递信息" value="中通快递"/>
      </van-cell-group>
    </div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      dataList: [],
      orderStatusJson:{}
    };
  },

  mounted() {
    this._initFn();
  },
  methods: {
    cancelRecord(item) {
      let str = "";
      str = "您确认取消订单:("+item.orderNo+")";
      this.$dialog
        .confirm({
          //title: '标题',
          message: str
        })
        .then(() => {
          //alert("22");
         this.get("center/cancel/"+item.id)
        .then(resp => {
          if(this.checkIsSsuccess(resp)){
            
            this.recordQuery();
          }else{
            this.$toast(resp.data.msg);
          }
        })
        .catch(e => {});
            
          //this.$router.push({path: '/center'})
        }).catch(()=>{
          // this.$toast(2);
        });
    },
    pageClose() {
      var userAgent = navigator.userAgent;
      if (
        userAgent.indexOf("Firefox") != -1 ||
        userAgent.indexOf("Chrome") != -1
      ) {
        window.location.href = "about:blank";
      } else if (
        userAgent.indexOf("Android") > -1 ||
        userAgent.indexOf("Linux") > -1
      ) {
        window.opener = null;
        window.open("about:blank", "_self", "").close();
      } else {
        window.opener = null;
        window.open("about:blank", "_self");
        window.close();
      }
    },
    onClickLeft() {
      // Toast('返回');
      // Toast('返回商品信息页面');
      this.$router.push({ path: "/home" });
    },
    onClickRight() {
      //当前关闭页面
      this.pageClose();
    },
    //查询个人订单记录信息
    recordQuery() {
      this.get("center/getOrderList")
        .then(resp => {
          if(this.checkIsSsuccess(resp)){
            this.dataList = resp.data.data.content;
            resp.data.orderStatusList.forEach(element => {
              this.orderStatusJson[element.value] = element.label;
            });;
          }
        })
        .catch(e => {});
    },
    _initFn() {
      this.recordQuery();
    },
    showPopup() {
      this.show = true;
    }
  }
};
</script>

<style scoped>
.center {
  width: 100%;
  overflow: hidden;
}
.home-line {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background: #f8f8f8;
  padding: 0 10px;
  box-sizing: border-box;
}
.van-cell2 {
  width: 100%;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  box-sizing: border-box;
}
</style>
